<template>
	<view class="search-box flex-row">
		<view @click="onIssue" class="generate-box text-center" :class="[tsList.length <= 0 ? 'opacity' : '']">
			<image src="/static/image/icon/dialog_l.png" mode=""></image>
			<div class="fontS20 color_fff" style="margin-top: -11rpx;">生成</div>
		</view>
		<view class="input-box">
			<u-textarea :placeholder="placeholder" border="none" :showConfirmBar="false" v-model="message"
				@focus="inputFocus" @blur="inputBlur" @input="onTextarea" @change="onTextarea" fixed autoHeight>
			</u-textarea>
			<view @longpress="startRecord" @touchend="endRecord"
				class="search-btn fontS28 flex justify-center align-center">
				<image src="/static/image/icon/mic.png" mode=""></image>
			</view>
		</view>
		<view @touchend.prevent="" v-show="message" class="btn mar_left20" @click="send">发送</view>
	</view>

	<!-- 语音音阶动画 长按说话时的动画 -->
	<view v-if="animation" class="prompt">
		<section class="dots-container">
			<view class="dot"></view>
			<view class="dot"></view>
			<view class="dot"></view>
			<view class="dot"></view>
			<view class="dot"></view>
		</section>
		<text>录音中...</text>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		watch,
		computed
	} from 'vue';

	const message = ref('')
	const emit = defineEmits(['inputFocus', 'inputBlur', 'onTextarea', 'send', 'onIssue'])
	const props = defineProps(['placeholder', 'textareaVal', 'chatList'])

	watch(props.textareaVal, (val) => {
		message.value = val.content
	})

	import {
		useStore
	} from 'vuex';
	const store = useStore();

	const tsList = ref([]);
	watch(store.state.chatList, (val) => {
		val.forEach(item => {
			if (item.source == 2 && item.type != -1) {
				tsList.value.push(item)
			}
		})
	})


	const onIssue = () => {
		if (tsList.value.length <= 0) return
		// 获取数组最后一位
		const content = tsList.value[tsList.value.length - 1];
		emit('onIssue', content);
	}

	const onTextarea = (e) => {
		emit('onTextarea', e)
	}
	// 输入框聚焦时触发
	const inputFocus = (e) => {
		emit('inputFocus', e)
	}
	// 输入框失去焦点时触发
	const inputBlur = () => {
		emit('inputBlur', '')
	}
	// 发送
	const send = () => {
		if (uni.getStorageSync('token')) {
			emit('send', message.value);
			message.value = "";
		} else {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}
	}
	// 翻译事件引入
	var plugin = requirePlugin("WechatSI");
	let manager = plugin.getRecordRecognitionManager();

	// 动画状态
	const animation = ref(false);

	const voiceState = ref('');
	// 开始录音
	const startRecord = () => {
		uni.getSetting({
			success: (res) => {
				if (!res.authSetting['scope.record']) {
					uni.authorize({
						scope: 'scope.record',
						success: (resust) => {
							console.log(resust, '权限')
						},
						fail: (err) => {
							uni.showModal({
								title: '授权提示',
								content: '该应用需要使用你的录音权限，是否同意？',
								success: function(res) {
									if (res.confirm) {
										uni.openSetting();
									} else if (res.cancel) {}
								}
							})
						}
					})
				} else {
					console.log('开始录音');
					manager.start({
						duration: 60000,
						lang: "zh_CN"
					})
				}
			}
		})
	}
	// 结束录音
	const endRecord = () => {
		console.log('录音结束');
		uni.hideLoading();
		animation.value = false;
		manager.stop();
	}
	/**
	 * 初始化语音识别回调  
	 * 绑定语音播放开始事件  
	 */
	const initRecord = () => {
		manager.onStart = (res) => {
			uni.showLoading({
				title: '录音中...',
				mask: true
			})
		};
		//有新的识别内容返回，则会调用此事件  
		manager.onRecognize = (res) => {
			message.value = res.result;
		}
		// 识别结束事件  
		manager.onStop = (res) => {
			uni.hideLoading();
			message.value = res.result;
			if (message.value == '') {
				console.log('没有说话')
				uni.showToast({
					title: '周围太安静啦~再试试~',
					icon: 'none',
					duration: 1200
				})
			}
		}

		// 识别错误事件  
		manager.onError = (res) => {
			// console.log(res, 'cuowu');
			voiceState.value == '';
			uni.showToast({
				title: '识别失败，请重试~',
				icon: 'none',
				duration: 1200
			})
		}
	}

	onMounted(() => {
		store.state.chatList.forEach(item => {
			if (item.source == 2 && item.type != -1) {
				tsList.value.push(item)
			}
		})

		initRecord();
	})
</script>

<style lang="scss" scoped>
	.generate-box {
		width: 120rpx;
		height: 80rpx;
		background: #E5725F;
		border-radius: 40rpx;
		margin-right: 30rpx;

		image {
			margin-top: 5rpx;
			width: 48rpx;
			height: 48rpx;
		}
	}

	.opacity {
		opacity: 0.5;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.search-box {
		opacity: 0.8;

		.input-box {
			flex: 1;
			display: flex;
			align-items: center;
			border-radius: 40rpx;
			position: relative;
		}

		.search-btn {
			position: absolute;
			right: 20rpx;
			width: 48rpx;
			height: 48rpx;

			image {
				width: inherit;
				height: inherit;
			}
		}
	}

	.btn {
		color: #fff;
		width: 90upx;
		height: 52upx;
		font-size: 24upx;
		line-height: 52upx;
		text-align: center;
		border-radius: 10upx;
		background-color: #E5725F;
	}

	/* 动画 */
	.prompt {
		width: 100%;
		height: 80px;
		position: fixed;
		bottom: 70px;
	}

	.prompt text {
		position: absolute;
		bottom: 2px;
		color: #f3a73f;
		left: calc(45%);
		animation: puls 1.5s infinite ease-in-out;
	}

	.dots-container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80px;
		width: 45%;
		position: absolute;
		bottom: 0px;
		left: calc(27.5%);
		background-color: #fdedd9;
		border-radius: 20px;
	}

	.dot {
		height: 16px;
		width: 16px;
		margin-right: 10px;
		border-radius: 10px;
		background-color: #f3a73f;
		animation: pulse 1.5s infinite ease-in-out;
	}

	.dot:last-child {
		margin-right: 0;
	}

	.dot:nth-child(1) {
		animation-delay: -0.3s;
	}

	.dot:nth-child(2) {
		animation-delay: -0.1s;
	}

	.dot:nth-child(3) {
		animation-delay: 0.1s;
	}

	@keyframes pulse {
		0% {
			transform: scale(0.8);
			background-color: #f3a73f;
			box-shadow: 0 0 0 0 rgba(243, 167, 63, 0.7);
		}

		50% {
			transform: scale(1.2);
			background-color: #f9d39f;
			box-shadow: 0 0 0 10px rgba(178, 212, 252, 0);
		}

		100% {
			transform: scale(0.8);
			background-color: #f3a73f;
			box-shadow: 0 0 0 0 rgba(243, 167, 63, 0.7);
		}
	}

	@keyframes puls {
		0% {
			transform: translateY(0px)
		}

		50% {
			transform: translateY(-4px)
		}

		100% {
			transform: translateY(0px)
		}
	}
</style>